<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {width:2000px; height:2000px; margin: 0;}
	#box {width: 200px;height: 200px; padding: 10px; margin: 6px; border: 2px solid #333;}
	#contain { width: 200px; height: 600px; background-color: red;margin:14px;}
	</style>
<script>
window.onload = function (){
	/*
		可视区的尺寸：
		document.documentElement.clientWidth
		document.documentElement.clientHeight
	*/
		// alert( document.documentElement.clientWidth )

	/*
		滚动条滚动距离:
		document.documentElement.scrollTop
		document.documentElement.scrollLeft

		// chrome浏览器下认为滚动条是属于body而不是document，所以需要兼容处理
	*/	
		document.onclick = function (){
			var scroll_Top = document.documentElement.scrollTop || document.body.scrollTop;
			// alert( scroll_Top );
		}
		
		/*
			内容高/宽
			obj.scrollHeight
		*/
		// alert( document.getElementById('contain').scrollHeight );		// 标准下: 600					IE7以下：19
		// alert( document.getElementById('box').scrollHeight );			//  IE & chrome : 638( 600 + padding-top + 14*2 )			firefox : 624 ( 600 + padding-top + 14*1 )  

		/*
			文档高度
		*/
		// alert( document.documentElement.offsetHeight );				//firefox & chrome : 2006			IE7：226		其他IE：230
		// alert( document.body.offsetHeight )							//2000
 }
</script>
</head>
<body>
	<div id="box">
		<div id="contain"></div>
	</div>
</body>
</html>